<template>
    <!-- 屏蔽默认右键菜单和添加新的右键菜单事件 -->
    <div oncontextmenu="self.event.returnValue=false">
        <el-table :data="data" border stripe style="margin-top: 15px;" id="meal-table"
            @row-contextmenu="handleRowContextMenu"
            @row-click="handleRowClick">
            <slot></slot>
        </el-table>
        <div class="context-menu-class-1"
            ref="contextMenu">
            <el-table
                style="width:110px;"
                border
                :data="menuItems"
                :show-header="false"
                @row-click="handleRowContextMenuClick">
                <el-table-column style="width:45px;">
                    <template slot-scope="scope">
                        <span>{{ scope.row.value }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    name: 'contextMenuTable',
    data() {
        return {
            _clickIndex: -1
        }
    },
    props: {
        data: {
            type: [Array, Object],
            required: true
        },
        menuItems: {
            type: Array,
            // default: () => []
            required: true
        },
        handleCtxMenu: Function
    },
    computed: {
    },
    methods: {
        handleRowContextMenu(row, event) {
            this.$refs.contextMenu.style.left = event.pageX + 'px'
            this.$refs.contextMenu.style.top = event.pageY + 'px'
            this.$refs.contextMenu.style.display = 'block'
            this.$refs.contextMenu.style.zIndex = 309
            let el = event.srcElement
            while (el.tagName !== 'TR') {
                el = el.parentNode
            }
            this._clickIndex = el.rowIndex
        },
        handleRowClick(row, event) {
            this.$refs.contextMenu.style.display = 'none'
        },
        handleRowContextMenuClick(row, event) {
            this.handleCtxMenu(row, event, this._clickIndex)
            this.handleRowClick()
        }
    }
}
</script>
<style>
.context-menu-class-1 {
    position: absolute;
    display: none;
}
</style>
